import React, { Component, useCallback, useState } from 'react'

import VoteMain from './VoteMain'
import VoteFooter from './VoteFooter'
import '../Demo.less'

// 类组件
// export default class index extends Component {
//   // 设置初始状态
//   state = {
//     supNum: 10,
//     oppNum: 5
//   };
//   // 修改状态的方法
//   change = type => {
//     let { supNum, oppNum } = this.state;
//     if (type === 'sup') {
//       this.setState({ supNum: supNum + 1 });
//       return;
//     }
//     this.setState({ oppNum: oppNum + 1 });
//   };

//   render() {
//     const {supNum,oppNum}=this.state
//     return (
// <div className='vote-box'>
//   <header className="header">
//           <h2 className="title">React真的很不错!!</h2>
//           <span className="num">总共：{supNum + oppNum}人</span>
//       </header>

//   <VoteMain supNum={supNum} oppNum={oppNum} />
//   <VoteFooter change={this.change} />
// </div>
//     )
//   }
// }

export default function Vote() {
  let [supNum, setSupNum] = useState(5),
    [oppNum, setOppNum] = useState(10)

  const change = useCallback(type => {
    if (type === 'sup') {
      setSupNum(supNum + 1)
      return;
    }
    setOppNum(oppNum + 1)
  })
  return (
    <div className='vote-box'>
      <header className="header">
        <h2 className="title">React真的很不错!!</h2>
        <span className="num">总共：{supNum + oppNum}人</span>
      </header>

      <VoteMain supNum={supNum} oppNum={oppNum} />
      <VoteFooter change={change} />
    </div>
  )
}
